<template>
  <div class="container">
    <!-- 顶部轮播效果实现 -->
    <div class="banner-wrapper">
      <div class="swiper-container banner">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item,index) in banners"
            :key="index"
            @click="goLink(item.url)"
          >
            <img :src="item.img" alt />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
      <div class="menus">
        <router-link tag="div" class="item" :to="{path:'/yue'}">
          <div class="icon"></div>
          <p>在线预约</p>
        </router-link>
        <router-link tag="div" class="item" :to="{path:'/activity'}">
          <div class="icon"></div>
          <p>活动报名</p>
        </router-link>
        <router-link tag="div" class="item" :to="{path:'/gcdl'}">
          <div class="icon"></div>
          <p>广场导览</p>
        </router-link>
        <router-link tag="div" class="item" :to="{path:'/about'}">
          <div class="icon"></div>
          <p>关于我们</p>
        </router-link>
      </div>
    </div>
    <div class="btns"></div>
    <div class="news">
      <h3 class="title">新闻资讯</h3>
      <p>News Information</p>
    </div>
    <div class="news-wrapper">
      <div class="swiper-container news-banner">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item,index) in banners"
            :key="index"
            @click="goLink(item.url)"
          >
            <img :src="item.img" alt />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
      <div class="news-content">
        <h3>
          最新资讯
          <span>查看更多</span>
        </h3>
        <ul>
          <li v-for="(item,index) in news" :key="index">
            <router-link :to="{path:'/detail?id='+item.id}" class="links">
              <span class="big">{{item.date.substring(5,7)}}</span>
              <span>/{{item.date.substring(8,10)}}</span>
              <p>{{item.title}}</p>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="news">
        <h3 class="title">
          热门活动
          <span>查看更多</span>
        </h3>
        <p>News Information</p>
      </div>
      <div class="wrapper">
        <span class="iconfont iconarrowRight"></span>
        <div class="img">
          <div class="top">
            <p>top</p>01
          </div>
          <img
            src="https://www.hymuseum.org.cn/uploadfiles/article_img/20200306/202003061029236624.png"
            alt
          />
        </div>
        <div class="news-item">
          <h3 class="news-title">茶香铺就成长路，小小茶人显身手</h3>
          <p>
            活动日期：
            <br />活动时间： 2019年7月13日（星期六），下午13:30—15:00
          </p>
          <p>活动地点：金华博物馆A区四层社教活动区</p>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="img">
        <div class="top">
          <p>top</p>02
        </div>
        <img
          src="https://www.hymuseum.org.cn/uploadfiles/article_img/20200306/202003061029236624.png"
          alt
        />
      </div>
      <div class="list-right">
        <h3 class="news-title">茶香铺就成长路，小小茶人显身手</h3>
        <p>活动日期： 2019年7月13日（星期六），下午13:30—15:00</p>
        <p>金华博物馆A区四层社教活动区</p>
      </div>
    </div>
    <div class="list">
      <div class="img">
        <div class="top">
          <p>top</p>03
        </div>
        <img
          src="https://www.hymuseum.org.cn/uploadfiles/article_img/20200306/202003061029236624.png"
          alt
        />
      </div>
      <div class="list-right">
        <h3 class="news-title">茶香铺就成长路，小小茶人显身手</h3>
        <p>活动日期： 2019年7月13日（星期六），下午13:30—15:00</p>
        <p>金华博物馆A区四层社教活动区</p>
      </div>
    </div>
    <div class="exhition">
      <div class="news">
        <h3 class="title">
          精品展项
         <router-link :to="{path:'/exhibit'}" tag="span"> 查看更多</router-link>
        </h3>
        <p>News Information</p>
      </div>
      <div class="content">
        <div class="item" v-for="i in 4" :key="i">
          <router-link :to="{path:'/exhibit/detail',query:{id:1}}">
            <img 
            src="https://www.hymuseum.org.cn/uploadfiles/article_img/20200306/202003061029236624.png" alt="">
          </router-link>
        </div>
      </div>
    </div>
    <div class="hall">
      <div class="news">
        <h3 class="title">数字展厅</h3>
        <p>News Information</p>
      </div>
      <div class="wrapper">
        <div class="img">
          <img
            src="https://www.hymuseum.org.cn/uploadfiles/article_img/20200306/202003061029236624.png"
            alt
          />
        </div>
        <h3>场馆及常设展厅 360°空间展示包括:</h3>
        <p>市民中心大厅、科技馆全部、儿童馆及到市民中心大厅、城展馆 一层和四层；</p>
      </div>
    </div>
    <div class="vol">
      <div class="wrapper">
        <div class="img">
          <img
            src="https://www.hymuseum.org.cn/uploadfiles/article_img/20200306/202003061029236624.png"
            alt
          />
        </div>
        <h1>
          志愿者
          <p>申请加入志愿者</p>
          <div class="btn">+ 加入我们</div>
        </h1>
        <p>申请人要求必须遵守国家法律法规，热爱祖国、热心博物馆公益 事业，具有良好的思想品德与职业道德，愿意无偿服务于社会。</p>
      </div>
    </div>
    <!-- 意见反馈 -->
    <div class="advice">
      <div class="news">
        <h3 class="title">意见反馈</h3>
        <p>News Information</p>
      </div>
      <div class="item">
        <p>
          您的姓名
          <span class="iconfont iconbitian"></span>
        </p>
        <input type="text" v-model="username" placeholder="请输入您的姓名..." />
      </div>
      <div class="item">
        <p>
          手机号码
          <span class="iconfont iconbitian"></span>
        </p>
        <input type="text" v-model="phone" placeholder="请输入您的手机号码..." maxlength="11" />
      </div>
      <div class="item">
        <p>
          内容
          <span class="iconfont iconbitian"></span>
        </p>
        <textarea v-model="content" placeholder="请输入您的意见或建议..." maxlength="200" /></textarea>
        <span class="num">{{content.length}}/200</span>
      </div>
      <div class="item">
        <div class="btn">提交</div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";

export default {
  name: "home",
  data() {
    return {
      username: "",
      content:"",
      phone:"",
      banners: [
        {
          url: "https://www.hymuseum.org.cn/intro?state=intro",
          img:
            "https://www.hymuseum.org.cn/uploadfiles/article_img/20200306/202003061029236624.png"
        }
      ],
      news: [
        { id: 1, title: "我的杀杀杀", date: "2020-04-01" },
        {
          id: 1,
          title:
            "我的杀杀杀我的杀杀杀我的杀杀杀我的杀杀杀我的杀杀杀我的杀杀杀我的杀杀杀",
          date: "2020-04-01"
        },
        { id: 1, title: "我的杀杀杀", date: "2020-04-01" }
      ]
    };
  },
  filters: {
    time: function(data) {
      var date = new Date(data);
      var month = date.getMonth() + 1;
      var day = date.getDay();
      return month + "-" + day;
    },
    getYMD: function(date) {
      var year = date.substring(0, 4);
      var month = date.substring(4, 7);
      var day = date.substring(8, 10);
      return year + "年" + month + "月" + day + "日";
    }
  },

  methods: {
    goLink(url) {
      window.location.href = url;
    },
    goSw() {
      this.$router.push({
        path: "/sw"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  font-size: 32px;
}
img {
  background: #e5e5e5;
}
.banner-wrapper {
  padding: 0;
  overflow: hidden;
  /*px*/
  position: relative;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.banner {
  width: 100%;
  height: 205px;
  overflow: hidden;
  .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    border: 0 none;
    outline: 0 none;
  }
  /deep/ .swiper-pagination-bullet {
    background: #b47c2d;
  }

  /deep/ .swiper-pagination-bullet-active {
    background: #b47c2d;
    width: 20px !important;
    border-radius: 5px;
  }
}

.menus {
  padding: 20px;
  display: flex;
  .item {
    flex: 1;
    font-size: 13px;
    color: #333;
    text-align: center;
    .icon {
      width: 25px;
      height: 25px;
      margin: 0 auto;
      background: url(../../img/home/1.png) no-repeat;
      background-size: cover;
    }
    &:nth-child(2) {
      .icon {
        background: url(../../img/home/2.png) no-repeat;
        background-size: cover;
      }
    }
    &:nth-child(3) {
      .icon {
        background: url(../../img/home/3.png) no-repeat;
        background-size: cover;
      }
    }
    &:nth-child(4) {
      .icon {
        background: url(../../img/home/4.png) no-repeat;
        background-size: cover;
      }
    }
  }
}
.btns {
  width: 100%;
  height: 10px;
  background: #efecf0;
}
/***新闻咨询开始 */
.news {
  height: 80px;
  width: 100%;
  overflow: hidden;
  .title {
    font-size: 15px;
    color: #000;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 15px;
    position: relative;
    span {
      font-size: 12px;
      color: #333333;
      position: absolute;
      bottom: -10px;
      right: 0;
    }
    &:after {
      content: "";
      width: 30px;
      height: 4px;
      background: #ee564f;
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
    }
    &::before {
      content: "";
      width: 84px;
      height: 2px;
      background: #efefef;
      position: absolute;
      bottom: -9px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }
  }
  p {
    font-size: 12px;
    color: #a2a2a2;
    text-align: center;
    transform: scale(0.95);
  }
}
.news-wrapper {
  background: #fff;
  padding: 10px;
  .news-banner {
    height: 200px;
    img {
      width: 100%;
      height: auto;
      display: block;
      border: 0 none;
      outline: 0 none;
    }
  }
  .news-content {
    overflow: hidden;
    height: 155px;
    background: url(../../img/home/5.png) no-repeat;
    background-size: cover;
    color: #fff;
    h3 {
      font-size: 15px;
      color: #fff;
      padding: 10px;
      overflow: hidden;
      position: relative;
      &:after {
        content: "";
        width: 55%;
        left: 80px;
        top: 50%;
        margin-top: -0.5px;
        height: 1px;
        background: #fff;
        position: absolute;
      }
      span {
        float: right;
      }
    }
    ul {
      padding: 0 20px;
      margin-top: 5px;
      li {
        display: flex;
        height: 20px;
        margin-bottom: 12px;
        line-height: 20px;
        font-size: 14px;
        font-weight: 500;
        .links {
          flex: 1;
          display: flex;
          color: #fff;
          &:hover {
            color: #855f1b;
            p {
              text-decoration: underline;
            }
          }
          .big {
            font-size: 15px;
            font-weight: bold;
          }
          p {
            flex: 1;
            margin-left: 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 278px;
          }
        }
      }
    }
  }
  .wrapper {
    width: 355px;
    min-height: 298px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.14);
    border-radius: 3px;
    margin-top: 5px;
    position: relative;
    span {
      width: 21px;
      height: 21px;
      background: rgba(255, 198, 98, 1);
      border-radius: 50%;
      position: absolute;
      text-align: center;
      color: #fff;
      line-height: 21px;
      bottom: 10px;
      right: 10px;
      font-size: 12px;
    }
    .img {
      height: 200px;
      width: 100%;
      position: relative;
      .top {
        position: absolute;
        top: 0;
        left: 30px;
        width: 43px;
        text-align: center;
        height: 49px;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        background: rgba(249, 201, 47, 1);
        border-radius: 0px 0px 2px 2px;
        p {
          font-size: 12px;
          transform: scale(0.95);
          font-weight: 400;
          color: #fff;
        }
      }
      img {
        height: 200px;
        width: 100%;
        display: inline-block;
      }
    }
    .news-item {
      padding: 10px 10px 15px;
    }
    .news-title {
      font-size: 14px;
      color: #000;
      margin-bottom: 5px;
    }
    p {
      color: #333;
      font-size: 12px;
      line-height: 24px;
    }
  }
}
.list {
  margin: 10px;
  height: 114px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.14);
  border-radius: 3px;
  display: flex;
  .img {
    height: 115px;
    width: 115px;
    position: relative;
    margin-right: 20px;
    .top {
      position: absolute;
      top: 0;
      left: 30px;
      width: 43px;
      text-align: center;
      height: 49px;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      background: rgba(249, 201, 47, 1);
      border-radius: 0px 0px 2px 2px;
      p {
        font-size: 12px;
        transform: scale(0.95);
        font-weight: 400;
        margin: 5px 0;
        color: #fff;
      }
    }
    img {
      height: 115px;
      width: 100%;
      display: inline-block;
    }
  }
  .list-right {
    flex: 1;
    .news-title {
      font-size: 14px;
      color: #000;
      margin-bottom: 5px;
      margin-top: 10px;
      line-height: 20px;
    }
    p {
      color: #333;
      font-size: 12px;
      line-height: 24px;
    }
  }
}
.exhition {
  padding: 0 10px 10px;
  background: #edb46e;
  color: #fff;
  .title {
    font-size: 15px;
    color: #fff;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 15px;
    position: relative;
    span {
      font-size: 12px;
      color: #fff;
      position: absolute;
      bottom: -10px;
      right: 0;
    }
    &:after {
      content: "";
      width: 30px;
      height: 4px;
      background: #ee564f;
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
    }
    &::before {
      content: "";
      width: 84px;
      height: 2px;
      background: #efefef;
      position: absolute;
      bottom: -9px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }
  }
  p {
    font-size: 12px;
    color: #fff;
    text-align: center;
    transform: scale(0.95);
  }
  .content{
    overflow:hidden;
    .item{
      width:172px;
      height:172px;
      border-radius: 3px;
      margin:0px 0px 10px;
      float:left;
      overflow: hidden;
      margin-right:10px;
      &:nth-child(2n){
        margin-right:0;
      }
      img{
        width:100%;
        height:100%;

      }
    }
  }
}
.hall,
.vol {
  padding: 0 10px 15px;
  margin-bottom: 15px;
  background: #f0f0f0;
  .wrapper {
    width: 100%;
    min-height: 298px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.14);
    .img {
      height: 200px;
      img {
        height: 200px;
        width: 100%;
      }
    }
    h3 {
      padding: 0 10px;
      color: #000;
      font-size: 13px;
      font-weight: bold;
      margin-top: 10px;
    }
    p {
      color: #333333;
      font-size: 12px;
      margin-top: 10px;
      line-height: 18px;
      padding: 0 10px;
    }
  }
  h1 {
    padding: 0 10px;
    margin-top: 15px;
    position: relative;
    color: #ffc662;
    font-size: 14px;
    .btn {
      position: absolute;
      width: 90px;
      height: 35px;
      line-height: 35px;
      color: rgba(218, 68, 83, 1);
      text-align: center;
      background: rgba(255, 255, 255, 1);
      border: 1px dashed rgba(218, 68, 83, 1);
      border-radius: 3px;
      top: 10px;
      right: 10px;
    }
    p {
      padding: 0 !important;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
.vol {
  background: #fff;
  padding-bottom: 28px;
  h1 {
    p {
      margin-bottom: 10px;
    }
  }
  .wrapper p {
    padding-bottom: 10px;
  }
}
.advice {
  background:#F9BF6B;
  padding-bottom:30px;
  .news {
    .title {
      color: #fff;
    }
    p {
      color: #fff;
    }
  }
  .item {
    padding: 0 10px;
    margin-bottom: 15px;
    position:relative;
    .num{
      position:absolute;
      bottom:10px;
      right:15px;
      color:#333;
      font-size:14px;
    }
    p {
      font-size: 14px;
      color: #fff;
      font-weight: bold;
      .iconbitian {
        color: #ff1f1f;
      }
      margin: 5px 0;
    }
    input,textarea {
      font-size: 14px;
      color: #333;
      background: #fff;
      height: 40px;
      padding: 0 10px;
      width: 100%;
      border: 0 none;
      outline: 0 none;
      &:focus {
        border-color: #ff1f1f;
      }
    }
    textarea{
      resize: none;
      padding:10px ;
      height:120px;
    }
    input::placeholder {
      color: #333333;
    }
    .btn{
      width:100%;
      height:43px;
      background:rgba(222,153,33,1);
      border-radius:2px;
      line-height: 43px;
      text-align:center;
      font-size:14px;
      color:#fff;

    }
  }
}
</style>
